<template>
  <div>
      <h2 class="h1">Getter学习页面</h2>
      <p>所有学生</p>
      <ul>
          <li v-for="item in $store.state.stus" :key="item.name">姓名：{{item.name}}，性别：{{item.sex}}，年龄：{{item.age}}</li>
      </ul>
      <p>所有女生（computed）</p>
      <ul>
          <li v-for="item in getGirls" :key="item.name">姓名：{{item.name}}，性别：{{item.sex}}，年龄：{{item.age}}</li>
      </ul>
      <p>所有女生（getters）</p>
      <ul>
          <li v-for="item in $store.getters.getGirls" :key="item.name">姓名：{{item.name}}，性别：{{item.sex}}，年龄：{{item.age}}</li>
      </ul>
      <p>所有成年女生（getters）</p>
      <ul>
          <li v-for="item in $store.getters.getAdultGirls" :key="item.name">姓名：{{item.name}}，性别：{{item.sex}}，年龄：{{item.age}}</li>
      </ul>
      <p>所有男生（mapGetters）</p>
      <ul>
          <li v-for="item in getBoys" :key="item.name">姓名：{{item.name}}，性别：{{item.sex}}，年龄：{{item.age}}</li>
      </ul>
      <p>所有大于20岁的人</p>
      <ul>
          <li v-for="item in getBiggerThan(20)" :key="item.name">姓名：{{item.name}}，性别：{{item.sex}}，年龄：{{item.age}}</li>
      </ul>
      <p>所有小于22岁的人</p>
      <ul>
          <li v-for="item in getLessThan(22)" :key="item.name">姓名：{{item.name}}，性别：{{item.sex}}，年龄：{{item.age}}</li>
      </ul>
  </div>
</template>

<script>

// 辅助函数，便于获取getter中的值
import {mapGetters} from "vuex";


export default {
    name: "HelloGetters",
    methods: {
        
    },
    computed: {
        getGirls() {
            return this.$store.state.stus.filter(v => v.sex == '女');
        },
        ...mapGetters(["getBoys","getBiggerThan","getLessThan"])
    }
}
</script>

<style scoped>
    .h1 {
        color: rgb(180, 20, 132);
    }

</style>
